import { _decorator, Component, Node, Label, Button, Sprite } from 'cc';
import { BaseView } from '../../../../scripts/libs/rxjs/cc3/BaseView';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { gm } from '../../../../scripts/managers/GameManager';
import { MergeASAP } from '../../../../scripts/libs/rxjs/cc3/Merge';
import { Color } from 'cc';
import { Colors } from '../../game/basic';
import { KeyDown } from '../../../../scripts/libs/rxjs/cc3/KeyEvent';
import { KeyCode } from 'cc';
import { lm } from '../../LobbyManager';
import { FlowStatus } from '../../Enums';
import { BindNodeTouch } from '../../../../scripts/libs/rxjs/cc3/BindNode';
import { nc } from '../../../../scripts/libs/rxjs/NotificationCenter';
const { ccclass, property } = _decorator;

@ccclass('EditorTools2')
export class EditorTools2 extends BaseView {

    @property(Sprite)
    colorSprite: Sprite = null;

    @property(Label)
    colorLabel: Label = null;

    @property(Button)
    exitButton: Button = null;

    @property(Button)
    createBlockButton: Button = null;

    @property(Button)
    createGlassButton: Button = null;

    @property(Button)
    createArrowButton: Button = null;

    @property(Button)
    createWallButton: Button = null;

    @property(Button)
    createIceBlockButton: Button = null;

    @property(Button)
    createLockerBlockButton: Button = null;

    @property(Button)
    createWoodBlockButton: Button = null;

    @property(Button)
    createBarrierButton: Button = null;

    useObserves() {
        return [
            MergeASAP(gm.editToolsSelected, gm.editColorSelected).subscribe(this.refresh.bind(this)),
            BindButton(this.exitButton).subscribe(_ => lm.flowStatus.value = FlowStatus.Lobby),
            BindButton(this.createBlockButton).subscribe(_ => gm.editToolsSelected.value = gm.editToolsSelected.value == 'block' ? null : 'block'),
            BindButton(this.createGlassButton).subscribe(_ => gm.editToolsSelected.value = gm.editToolsSelected.value == 'glass' ? null : 'glass'),
            BindButton(this.createArrowButton).subscribe(_ => gm.editToolsSelected.value = gm.editToolsSelected.value == 'arrow' ? null : 'arrow'),
            BindButton(this.createWallButton).subscribe(_ => gm.editToolsSelected.value = gm.editToolsSelected.value == 'wall' ? null : 'wall'),
            BindButton(this.createIceBlockButton).subscribe(_ => gm.editToolsSelected.value = gm.editToolsSelected.value == 'ice_block' ? null : 'ice_block'),
            BindButton(this.createLockerBlockButton).subscribe(_ => gm.editToolsSelected.value = gm.editToolsSelected.value == 'locker_block' ? null : 'locker_block'),
            BindButton(this.createWoodBlockButton).subscribe(_ => gm.editToolsSelected.value = gm.editToolsSelected.value == 'wood_block' ? null : 'wood_block'),
            BindButton(this.createBarrierButton).subscribe(_ => gm.editToolsSelected.value = gm.editToolsSelected.value == 'barrier' ? null : 'barrier'),

            KeyDown().subscribe((_: KeyCode) => {
                if (_ == KeyCode.KEY_B) {
                    gm.editToolsSelected.value = gm.editToolsSelected.value == 'block' ? null : 'block';
                } else if (_ == KeyCode.KEY_G) {
                    gm.editToolsSelected.value = gm.editToolsSelected.value == 'glass' ? null : 'glass';
                } else if (_ == KeyCode.KEY_A) {
                    gm.editToolsSelected.value = gm.editToolsSelected.value == 'arrow' ? null : 'arrow';
                } else if (_ == KeyCode.KEY_W) {
                    gm.editToolsSelected.value = gm.editToolsSelected.value == 'wall' ? null : 'wall';
                } else if (_ == KeyCode.KEY_I) {
                    gm.editToolsSelected.value = gm.editToolsSelected.value == 'ice_block' ? null : 'ice_block';
                } else if (_ == KeyCode.KEY_L) {
                    gm.editToolsSelected.value = gm.editToolsSelected.value == 'locker_block' ? null : 'locker_block';
                } else if (_ == KeyCode.KEY_O) {
                    gm.editToolsSelected.value = gm.editToolsSelected.value == 'wood_block' ? null : 'wood_block';
                } else if (_ == KeyCode.KEY_E) {
                    gm.editToolsSelected.value = gm.editToolsSelected.value == 'barrier' ? null : 'barrier';
                }
            }),

            BindNodeTouch(this.createArrowButton.node).subscribe(_ => {
                if (_.type == 'touch-start') {
                    nc.post('create_arrow', { shapeId: 1 });
                }
                _.preventSwallow = true;
            }),
        ];
    }

    refresh() {
        this.colorSprite.color = Colors[gm.editColorSelected.value];
        this.colorLabel.string = `Color\n${gm.editColorSelected.value}`;
        this.createBlockButton.node.getChildByName('indicator').active = gm.editToolsSelected.value == 'block';
        this.createGlassButton.node.getChildByName('indicator').active = gm.editToolsSelected.value == 'glass';
        this.createArrowButton.node.getChildByName('indicator').active = gm.editToolsSelected.value == 'arrow';
        this.createWallButton.node.getChildByName('indicator').active = gm.editToolsSelected.value == 'wall';
        this.createIceBlockButton.node.getChildByName('indicator').active = gm.editToolsSelected.value == 'ice_block';
        this.createLockerBlockButton.node.getChildByName('indicator').active = gm.editToolsSelected.value == 'locker_block';
        this.createWoodBlockButton.node.getChildByName('indicator').active = gm.editToolsSelected.value == 'wood_block';
        this.createBarrierButton.node.getChildByName('indicator').active = gm.editToolsSelected.value == 'barrier';
    }

}

